<template>
	<div class="app-container home">
		<el-row :gutter="20">
			<el-col :sm="24" :lg="24">
				<h2>UPS</h2>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<!-- align="middle" -->
			<el-col :sm="6" :lg="6">
				<p>总数</p>
				<p>100</p>
			</el-col>
			<el-col :sm="6" :lg="6">
				<p>在线</p>
				<p>20</p>
			</el-col>
			<el-col :sm="6" :lg="6">
				<p>离线</p>
				<p>80</p>
			</el-col>
			<el-col :sm="6" :lg="6">
				<p>故障</p>
				<p>0</p>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<div :class="className" :style="{height:height,width:width}" :ref="'chart'" />
			</el-col>
		</el-row>
		<el-divider />

		<el-row :gutter="20">
			<el-col :sm="24" :lg="24">
				<h2>逆变器</h2>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<!-- align="middle" -->
			<el-col :sm="6" :lg="6">
				<p>总数</p>
				<p>100</p>
			</el-col>
			<el-col :sm="6" :lg="6">
				<p>在线</p>
				<p>20</p>
			</el-col>
			<el-col :sm="6" :lg="6">
				<p>离线</p>
				<p>80</p>
			</el-col>
			<el-col :sm="6" :lg="6">
				<p>故障</p>
				<p>0</p>
			</el-col>
		</el-row>
		<el-divider />

		<el-row :gutter="20">
			<el-col :sm="24" :lg="24">
				<h2>充电桩</h2>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<!-- align="middle" -->
			<el-col :sm="6" :lg="6">
				<p>总数</p>
				<p>100</p>
			</el-col>
			<el-col :sm="6" :lg="6">
				<p>在线</p>
				<p>20</p>
			</el-col>
			<el-col :sm="6" :lg="6">
				<p>离线</p>
				<p>80</p>
			</el-col>
			<el-col :sm="6" :lg="6">
				<p>故障</p>
				<p>0</p>
			</el-col>
		</el-row>
		<el-divider />
	</div>
</template>

<script>
	import LineChart from '@/views/dashboard/LineChart.vue' //折线图 如需要使用若依封装好的Echarts图表组件，再引入
	import * as echarts from 'echarts' //导入echarts
	require('echarts/theme/macarons') //Echarts主题
	import resize from '@/views/dashboard/mixins/resize' //重新绘制尺寸

	export default {
		mixins: [resize],
		components: {
			LineChart
		}, //无需引入的组件则无需配置
		props: {
			className: { //Echarts图表绑定的类名
				type: String,
				default: 'chart'
			},
			width: { //Echarts图表的宽度
				type: String,
				default: '100%'
			},
			height: { //Echarts图表的高度
				type: String,
				default: '400px'
			},
			autoResize: { //是否自动绘制图表尺寸
				type: Boolean,
				default: true
			},
		},
		name: "Index",
		data() {
			return {
				// 版本号
				version: "3.6.3",
				chart: null, //Echarts图表实例对象，对应div中ref引用
				chartData: null, //数据1：Echarts数据data为数组
				chartMap: null, //数据2：Echarts数据data为Map
				//日期格式
				options: {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit',
					second: '2-digit'
				},
			};
		},
		methods: {
			goTarget(href) {
				window.open(href, "_blank");
			},
			/**
				图表初始化
			*/
			initChartCu() {
				if (this.$refs.chart) {
					//参数1：初始化的图表实例对象  参数2：主题(非必填参数)
					this.chart = echarts.init(this.$refs.chart, 'macarons')
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.home {
		blockquote {
			padding: 10px 20px;
			margin: 0 0 20px;
			font-size: 17.5px;
			border-left: 5px solid #eee;
		}

		hr {
			margin-top: 20px;
			margin-bottom: 20px;
			border: 0;
			border-top: 1px solid #eee;
		}

		.col-item {
			margin-bottom: 20px;
		}

		ul {
			padding: 0;
			margin: 0;
		}

		font-family: "open sans",
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;
		font-size: 13px;
		color: #676a6c;
		overflow-x: hidden;

		ul {
			list-style-type: none;
		}

		h4 {
			margin-top: 0px;
		}

		h2 {
			margin-top: 10px;
			font-size: 26px;
			font-weight: 100;
		}

		p {
			margin-top: 10px;

			b {
				font-weight: 700;
			}
		}

		.update-log {
			ol {
				display: block;
				list-style-type: decimal;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0;
				margin-inline-end: 0;
				padding-inline-start: 40px;
			}
		}
	}
</style>